<template>
  <div class="air-quality-card">
    <div class="card-title">{{ title }}</div>
    <div class="quality-indicator" :class="qualityClass">
      <span class="value">{{ value }}</span>
      <span class="unit">{{ unit }}</span>
    </div>
    <div class="quality-label">
      <el-tag :type="tagType" size="small">{{ qualityLabel }}</el-tag>
    </div>
    <div class="quality-description">{{ description }}</div>
  </div>
</template>

<script>
export default {
  name: 'AirQualityIndicator',
  props: {
    // 指标名称
    title: {
      type: String,
      required: true
    },
    // 指标数值
    value: {
      type: [Number, String],
      required: true
    },
    // 单位
    unit: {
      type: String,
      default: ''
    },
    // 阈值设置：[优, 良, 轻度污染, 中度污染, 重度污染]
    thresholds: {
      type: Array,
      default: () => []
    },
    // 描述文字
    description: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 计算质量等级
    qualityLevel() {
      const val = Number(this.value);
      const thresholds = this.thresholds || [];
      
      if (thresholds.length === 0) {
        return 0; // 默认为优
      }
      
      for (let i = 0; i < thresholds.length; i++) {
        if (val <= thresholds[i]) {
          return i;
        }
      }
      
      return thresholds.length; // 超过最高阈值
    },
    
    // 质量标签文字
    qualityLabel() {
      const labels = ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染'];
      return labels[this.qualityLevel] || '未知';
    },
    
    // 标签类型
    tagType() {
      const types = ['success', 'success', 'warning', 'warning', 'danger', 'danger'];
      return types[this.qualityLevel] || 'info';
    },
    
    // CSS类
    qualityClass() {
      const classes = ['excellent', 'good', 'light-pollution', 'moderate-pollution', 'heavy-pollution', 'severe-pollution'];
      return classes[this.qualityLevel] || '';
    }
  }
};
</script>

<style scoped>
.air-quality-card {
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s;
}

.air-quality-card:hover {
  transform: translateY(-5px);
}

.card-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 10px;
}

.quality-indicator {
  margin: 15px 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.quality-indicator .value {
  font-size: 36px;
  font-weight: bold;
}

.quality-indicator .unit {
  font-size: 14px;
  color: #909399;
  margin-left: 5px;
}

.quality-label {
  margin-bottom: 10px;
}

.quality-description {
  font-size: 12px;
  color: #909399;
}

/* 质量等级对应的颜色 */
.excellent .value {
  color: #67c23a;
}

.good .value {
  color: #67c23a;
}

.light-pollution .value {
  color: #e6a23c;
}

.moderate-pollution .value {
  color: #e6a23c;
}

.heavy-pollution .value {
  color: #f56c6c;
}

.severe-pollution .value {
  color: #f56c6c;
}
</style>
